<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>ECharts</title>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="./lib/echarts.min.js"></script>
</head>

<body>
  <!-- 为 ECharts 准备一个定义了💕 宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，💕 初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的💕 配置项和数据
    var option = {

      //🏃 标题
      title: {
        text: '食物售价',
        textStyle: {
          fontSize: 24,
          // color: 'red'
        },
        left: 'auto'

      },
      //🏃 调色盘颜色,数据显示series颜色默认选这个
      color: '#86cce9',
      //🏃 提示
      tooltip: {
        trigger: 'axis'
      },
      //🏃 图例
      legend: {
        data: ['价格'],
        right: '15%',
        itemStyle: {
          color: "rgba(65, 211, 39, 1)",
          color: "#86cce9"
        }
      },
      xAxis: {
        data: ['西兰花', '西瓜', '西葫芦', '西北风', '西红柿', '西芹', '西洋菜']
      },
      yAxis: {
        // y轴的分割线
        splitLine: {
          // 分割线的样式
          lineStyle: {
            // 分割线的类型
            //  dashed 虚线，默认是solid 实线
            type: 'solid'
          }
        }
      },
      grid: {
        left: '12 %',
        right: '30%'
      },
      series: [

        {
          name: '价格',
          type: 'bar',
          data: [150, 230, 224, 34, 135, 147, 260], colorBy: 'data',
        }
      ]
    };

    // 使用刚指定的配置项和数据💕显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>